<!-- 模块说明 -->

<script setup lang='ts'>
// @ts-ignore
import { ref, onMounted } from 'vue';
// @ts-ignore
import axios from 'axios';
// @ts-ignore
import { useRouter } from 'vue-router'
const router = useRouter()

const wu = ref(true)
const mei = ref()
const tableData = ref<any>([])
const img = ref<any>()
const totalall = ref(0)
const multipleSelection = ref<any>([])
const sonlist = ref<any>([])
//获取购物车列表
const getcartlist = async () => {
    if (localStorage.getItem('pinia-customer')) {
        mei.value = false
        let res = await axios({
            url: 'http://182.92.162.156:8083/shopcart/list',
            method: 'get'
        })
        console.log(res.data.data, '购物车列表');
        if (res.data.data.length) {
            tableData.value = res.data.data.filter((item: any) => item.username == JSON.parse(localStorage.getItem('pinia-customer') + '').userid)
            getprolist(tableData.value[0].productname)
        } else {
            wu.value = false
        }
    } else {
        wu.value = false
        mei.value = true
    }
};
//按照名称查询商品
const getprolist = async (name: any) => {
    let res = await axios({
        url: 'http://182.92.162.156:8083/product/select',
        method: 'post',
        data: {
            proname: name
        }
    })
     console.log(res, '商品');
    // console.log(res.data.data[0].img, '商品照片');
    // img.value = res.data.data[0].img
};

const handleChange = () => {
    // console.log(value)
    alltotal()
}

const handleSelectionChange = (val: any) => {
    // console.log(val, '打印');
    sonlist.value = val
    multipleSelection.value = val
    alltotal()
}

const alltotal = () => {
    totalall.value = multipleSelection.value.reduce((preVal: any, currVal: any) => { return preVal + currVal.productcount * currVal.price * 100; }, 0);
}

const onSubmit = () => {
    if (totalall.value) {
        console.log(1);
        const colors = sonlist.value
        router.push({ path: '/jiesuan', query: { colors: JSON.stringify(colors) } })
    } else {
        // console.log(0);
    }
}

//去登陆
const onClickIcon1 = () => {
    const redirect = router.currentRoute.value.path;
    console.log(router.currentRoute.value.path, "路由当前路径");
    router.push({ path: '/login', query: { redirect } });
    // if (sessionStorage.getItem('token')) {
    //     // router.push("/cart");
    //     console.log(1, "token");
    // } else {
    //     router.push("/login");
    // }
};

//删除购物车一条数据
const delone = async (id: any) => {
    // console.log(sonlist.value[0], 'shanchu');
    let res = await axios({
        url: 'http://182.92.162.156:8083/shopcart/del',
        method: 'get',
        params: {
            shopid: id
        }
    })
    console.log(res, '删除');
    getcartlist()
}

onMounted(() => {
    getcartlist()
})
</script>

<template>
    <div class="che" v-if="wu">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
            border height="571" empty-text="空">
            <el-table-column type="selection" width="40" />
            <el-table-column label="全选">
                <template #default="scope">
                    <div class="cont">
                        <img width="50" height="50"
                            :src="'http://182.92.162.156:8083/product/downpropic?filename=' + scope.row.attr" alt="">
                        <div>
                            <p>商品：{{ scope.row.productname }}</p>
                            <p>单价：{{ scope.row.price }}元</p>
                            <p>描述：{{ scope.row.productsku }}</p>
                            <div>
                                <p>数量：</p>
                                <el-input-number v-model="scope.row.productcount" :min="1" @change="handleChange" />
                            </div>
                        </div>
                        <el-button type="danger" @click="delone(scope.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <van-submit-bar :price="totalall" button-text="结算" @submit="onSubmit" />
    </div>
    <div class="cart" v-else>
        <van-empty description="购物车空空如也~" />
        <div class="cart1" v-if="mei">
            <el-button type="primary" @click="onClickIcon1">去登陆</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.cont {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.cart {
    display: flex;
    flex-direction: column;
    align-items: center;

    .cart1 {
        width: 100px;
    }
}
</style>
